import { ExtractPropTypes } from 'vue'
import { TuniaoType, TuniaoTypes } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * 内置空白页提示mode有效值
 */
export const EmptyModes = ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'] as const
export type EmptyMode = typeof EmptyModes[number]

/**
 * props参数
 */
export const emptyProps = {
  /** 显示空白页 */
  show: {
    type: Boolean,
    default: false
  },
  /** 图鸟内置空白提示ICON */
  mode: {
    type: String,
    default: 'data',
    validator: (value: EmptyMode) => {
      return EmptyModes.includes(value)
    }
  },
  /** 
   * 自定义icon/图片(可以覆盖内置信息)
   * 建议使用本地图片
   */
  icon: {
    type: String,
    default: ''
  },
  /** 图标颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  iconColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 图标大小, 如果icon为图片时则是图片的宽高, 单位rpx */
  iconSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 提示文字(可以覆盖内置信息) */
  text: {
    type: String,
    default: ''
  },
  /** 提示文字颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  textColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 提示文字大小, 单位rpx */
  textSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 颜色类型，如果自定义了颜色则使用颜色的值 */
  type: {
    type: String,
    default: '',
    validator: (value: TuniaoType | '') => {
      return value === '' || TuniaoTypes.includes(value)
    }
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type EmptyProps = ExtractPropTypes<typeof emptyProps>
